@use "base.scss";

.editor-root.editor--article {
  position: relative;

  .ProseMirror-menubar-wrapper .ProseMirror-menubar .ProseMirror-menuitem {
    .ProseMirror-icon {
      margin-right: var(--space-small);
    }

    .ProseMirror-icon svg {
      width: var(--space-medium) !important;
      height: var(--space-medium);
    }
  }

  .ProseMirror {
    p {
      font-size: var(--font-size-medium);
      line-height: 1.75rem;
      margin-bottom: var(--space-medium);
    }

    strong code {
      font-size: var(--font-size-medium);
    }

    pre code {
      font-size: var(--font-size-default);
      font-weight: var(--font-weight-medium);
      line-height: 1.6;
    }

    blockquote {
      padding-left: var(--space-normal);
      margin: var(--space-medium) 0;
    }

    a {
      font-weight: var(--font-weight-medium);
      font-size: var(--font-size-medium);
    }

    hr {
      border-color: var(--s-100);
      margin-bottom: var(--space-big);
    }

    h1 {
      font-size: var(--font-size-big);
      font-weight: var(--font-weight-heavy);
      margin-bottom: var(--space-medium);
    }

    h2 {
      font-size: var(--font-size-large);
      font-weight: var(--font-weight-black);
      margin-bottom: var(--space-medium);
    }

    h3,
    h4 {
      font-size: var(--font-size-medium);
      font-weight: var(--font-weight-bold);
      margin-bottom: var(--space-normal);
    }

    h5 {
      font-size: var(--font-size-medium);
      margin-bottom: var(--space-small);
    }

    h6 {
      font-size: var(--font-size-medium);
      margin-bottom: var(--space-smaller);
    }

    .ProseMirror-icon svg {
      width: var(--space-medium) !important;
    }

    li::marker {
      font-size: var(--font-size-medium);
    }

    ul,
    ol {
      margin-top: var(--space-medium);
      margin-bottom: var(--space-medium);
      padding-left: var(--space-large);
    }

    li {
      ul,
      ol {
        margin-top: var(--space-normal);
        margin-bottom: var(--space-normal);
      }
      p {
        padding-left: var(--space-medium);
        margin-top: var(--space-small);
        margin-bottom: var(--space-small);
      }
    }

    pre {
      padding: var(--space-normal);
      margin-bottom: var(--space-normal);
    }
  }

  .ProseMirror-menubar {
    margin-bottom: var(--space-small);
    padding: var(--space-smaller) 0;
  }
}
